<template>
  <!-- 首页顶部轮播图组件 -->
  <div class="hero">
    <el-carousel
      :height="height"
      indicator-position="outside"
      trigger="click"
      arrow="hover"
      :autoplay="autoplay"
      :interval="interval"
    >
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div
          class="carousel-item"
          :style="{ backgroundImage: `url(${item.imageUrl})` }"
        >
          <!-- 按钮容器 -->
          <div class="carousel-buttons">
            <div class="carousel-buttons-content">
              <slot name="carousel-custom"></slot>
              <div>
                <button
                  class="carousel-btn"
                  v-if="item.primaryBtnText"
                  @click="handlePrimaryBtnClick(item)"
                >
                  {{ item.primaryBtnText }} -→
                </button>
                <button
                  class="carousel-btn consult-btn"
                  v-if="item.secondaryBtnText"
                  @click="handleSecondaryBtnClick(item)"
                >
                  {{ item.secondaryBtnText }} -→
                </button>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "HeroSection",
  components: {},
  props: {
    // 轮播图数据
    carouselItems: {
      type: Array,
      default: () => [
        {
          imageUrl: require("@/assets/swiper1.png"),
          primaryBtnText: "立即创建",
          secondaryBtnText: "立即咨询",
        },
        {
          imageUrl: require("@/assets/swiper2.png"),
          primaryBtnText: "立即体验",
          secondaryBtnText: "立即咨询",
        },
      ],
    },
    // 轮播图高度
    height: {
      type: String,
      default: "700px",
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: false,
    },
    // 自动播放间隔
    interval: {
      type: Number,
      default: 5000,
    },
  },
  data() {
    return {
      showConsultArea: false,
      showWechatPopup: false,
      showPhonePopup: false,
    };
  },
  methods: {
    ...mapActions("home", ["navigateAndSetActive"]),
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    toggleConsultArea() {
      this.showConsultArea = !this.showConsultArea;
      // 关闭弹出框
      this.showWechatPopup = false;
      this.showPhonePopup = false;
    },
    // 处理主要按钮点击事件
    handlePrimaryBtnClick(item) {
      console.log("立即创建跳转了", item);
      // 跳转产品中心
      // 先调用 action 更新状态
      this.navigateAndSetActive({ index: "3" });
      // 使用封装的导航方法并传递query参数
      this.$router.push({
        path: "ProductCenter",
        // params: { id: 123, name: "张三" }, // 参数
      });
      // 切换导航栏选中状态

      // // 如果需要，可以通过事件传递给父组件
      // this.$emit('primary-btn-click', item);
    },
    // 处理次要按钮点击事件
    handleSecondaryBtnClick(item) {
      // 可以在这里添加按钮点击事件的处理逻辑
      // 如果需要，可以通过事件传递给父组件
      this.$emit("secondary-btn-click", item);
      // 原来的咨询相关逻辑
      this.toggleConsultArea();
    },
  },
};
</script>

<style scoped lang="scss">
/* 英雄区样式 */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 轮播项基础样式 */
.carousel-item {
  width: 100%;
  height: 100%;
  background-size: cover; /* 图片覆盖整个区域 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 图片不重复 */
  position: relative; /* 添加相对定位，确保按钮容器的绝对定位正常工作 */
}

::v-deep .el-carousel {
  .el-carousel__indicators--outside {
    position: absolute !important;
  }
}

/* 按钮容器样式 */
.carousel-buttons {
  // position: absolute;
  bottom: 30%;
  left: 150px;
  display: flex;
  gap: 20px;
  z-index: 10;
  height: 100%;
}

.carousel-buttons-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 150px;
  padding-left: 120px;
}

/* 轮播箭头样式 */
.el-carousel__arrow {
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: white !important;
  font-size: 24px;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1;
}

/* 隐藏滚动条 */
.hero::-webkit-scrollbar {
  display: none;
}

.hero {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
